<!--查找聊天内容-->
<template>
    <div class="findChatWrap">
        <div class="head">
            <div class="inpSearch">
                <img src="../assets/img/Search.png" class="searchIcon">
                <input type="text" v-model="searchTxt" placeholder="搜索">
            </div>
            <p @click="back">取消</p>
        </div>
        <div class="content">
            <div class="dataOrImg">
                <p class="tip">快速搜索聊天内容</p>
                <div class="select">
                    <p v-if="groupFind">群成员</p>
                    <span class="line" v-if="groupFind"></span>
                    <p @click="timeFn">日期</p>
                    <span class="line"></span>
                    <p @click="picFn">图片</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                searchTxt: null,
                groupFind:true   //是否为群聊天查找
            }
        },
        components: {},
        methods: {
            back() {
                this.$router.back()
            },
            timeFn(){
              this.$router.push({
                path: '/datefind'
              })
            },
            picFn(){
              this.$router.push({
                path: '/picfind'
              })
            }
        }
    }
</script>

<style scoped lang="less">
    .findChatWrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #ffffff;

        .head {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            display: flex;
            align-items: center;
            width: 100%;
            height: 88px;
            background-color: #fafafa;
            border-bottom: 1px solid #ABABAB;

            .inpSearch {
                display: flex;
                align-items: center;
                width: 625px;
                height: 55px;
                background: rgba(235, 236, 236, 1);
                border-radius: 28px;
                margin-left: 25px;
                margin-right: 20px;

                .searchIcon {
                    width: 28px;
                    height: 28px;
                    margin-left: 26px;
                    margin-right: 15px;
                }

                input {
                    width: 490px;
                    background: transparent;
                    margin-right: 10px;
                }

                .closeIcon {
                    width: 32px;
                    height: 32px;
                }
            }

            p {
                font-size: 28px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(188, 189, 189, 1);
            }
        }

        .content {
            position: absolute;
            top: 89px;
            bottom: 0;
            width: 100%;

            .dataOrImg {
                padding-top: 50px;
                .tip {
                    font-size: 28px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(142, 142, 146, 1);
                    text-align: center;
                }

                .select {
                    display: flex;
                    justify-content: center;
                    margin-top: 50px;
                    p {
                        font-size: 32px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: #627DF1;
                    }
                    .line {
                        width:3px;
                        height:36px;
                        background:rgba(153,153,153,1);
                        margin: 0 52px;
                    }
                }
            }
        }


    }
</style>
